<template>
  <div class="h-full bg-gray-100 flex items-center justify-center">
    <div class="w-25em bg-white rounded p-8 shadow-2xl">
      <div class="text-center text-2xl font-bold">Login</div>
      <div class="pt-4">
        <form @submit.prevent="handleSubmit">
          <div class="mb-4">
            <label for="username" class="block text-gray-700 font-bold mb-2">用户名</label>
            <input
                type="text"
                id="username"
                v-model="form.username"
                placeholder="用户名"
                class="w-full border border-gray-300 p-2 rounded"
            />
          </div>
          <div class="mb-4">
            <label for="password" class="block text-gray-700 font-bold mb-2">密码</label>
            <input
                type="password"
                id="password"
                v-model="form.password"
                placeholder="密码"
                class="w-full border border-gray-300 p-2 rounded"
            />
          </div>
          <div v-if="errorMsg" class="text-red-500 mb-4">{{ errorMsg }}</div>
          <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded">登录</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const form = ref({
  username: '',
  password: ''
});
const errorMsg = ref('');
const router = useRouter();

const validUsername = 'admin';
const validPassword = '123456';

const handleSubmit = () => {
  if (form.value.username === validUsername && form.value.password === validPassword) {
    errorMsg.value = '';
    router.push('/index');
  } else {
    errorMsg.value = '用户名或密码错误';
  }
};
</script>

<style scoped>
/* 这里可以添加自定义样式 */
</style>